<template>
  <div class="container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="知识搜索" name="first">

          <div class="search_box">
            <div class="sear_ifno">
              <el-form ref="searchRef">
                <el-form-item label="知识搜索">
                  <el-input  placeholder="请输入" v-model="searchiptValue"></el-input>
                </el-form-item> 
                <div class="button" style="margin-left: 15px; margin-top: -5px">
                  <el-button icon="el-icon-search" type="primary" @click="confimFn">确定</el-button>
                </div>
              </el-form>
            </div>

            <div class="show" v-show="show">
              <div class="cont" v-for="(item, index) in findResult" :key="index">
                <el-card>
                  <div class="cards">
                    <div><span class="name">课程名称：</span>
                      <span>{{ item['name']}}</span>
                    </div>
                    <div><span class="name">先修课程：</span>
                      <span>{{ item['先修课程']}}</span>
                    </div>
                    <div><span class="name">介绍：</span>
                      <span>{{ item['介绍']}}</span>
                    </div>
                    <div><span class="name">学时：</span>
                      <span>{{ item['学时']}}</span>
                    </div>
                    <div><span class="name">课程基本信息：</span>
                      <span>{{ item['课程基本信息：']}}</span>
                    </div>
                    <div><span class="name">教学大纲：</span>
                      <span>{{ item['教学大纲']}}</span>
                    </div>

                  </div>
                </el-card>
              </div>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="关系图谱" name="second">
          <div class="search_box">
            <div class="sear_ifno">
              <el-form ref="searchRef" >
                <el-form-item label="关系图谱">
                  <el-input  placeholder="请输入" v-model="iptValue"></el-input>
                </el-form-item>
                <div class="button" style="margin-left: 15px; margin-top: -5px">
                  <el-button icon="el-icon-search" type="primary" @click="confim">确定</el-button>
                </div>
              </el-form>
            </div>
          </div>
          <div class="echarts" style="width: 1202px; height: 731px" ref="echarts"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import graph from "@/components/InfoRecommend/echarts.json";
import { getIntrodectionAPI, getSearchAPI, getRecommend } from '@/api/curriculum'
export default {
  data() {
    return {
      iptValue: '',
      searchiptValue:'',
      ShowMessage:{},
      isShow : true,
      graph,

      gname: [],
      mname: [],
      activeName: 'second',
      findResult1: { "id": 3, "mid": "4", "先修课程": "程序设计基础、离散结构", "介绍": "本课程介绍非数值型数据对象的定义和表达及其相关操作、算法的性能分析、常用的基本算法及应用等内容。通过本课程的学习,学生能够较为全面地理解数据结构的概含.掌握各种常用的数据结构及其算法,能够为实际问题选择合适的数据结构及其算法。", "学时": "48+16", "教学大纲": "（主题1）数据结构概述：（主题1内容）数据结构的定义(逻辑结构、存储结构、运算)抽象数据类型\n（主题2）算法分析基础：（主题2内容）算法与时空复杂性分析\n（主题3）线性表、堆栈，队列：（主题3内容）线性表(数组、链表),堆栈，队列及其应用\n（主题4）树与二叉树：（主题4内容）二又树，二又排序树的概念与性质，堆与优先队列，森林与二叉树的等价转换，树和森林的遍历。Hoflaan编码树\n（主题5）图：（主题5内容）图的基本概念,图的存储结构，图的遍历(保度优无搜索、广度优先搜索)，拓扑排序，最短路径问题，最小生成树(Priam算法Knuskal算法)\n（主题6）内部排序：（主题6内容）排序问题的基本概念.简单排序算法(插入排序、冒泡排序、选择排序)Shell排序，快速排序，归并排序,堆排序，基数排序\n（主题7）查找：（主题7内容）查栈的基本概念，基于线性表的查找.B-树，散列方法\n（主题8）常用算法及应用：（主题8内容）穷举，贪婪，分治，回溯，动态规划", "name": "数据结构与算法", "category": null, "前置课程": [], "知识单元": [], "知识点": [1, 2, 3, 4, '新知识点'], "课程内容信息": null, "课程基本信息": { "id": 93, "mid": "4", "介绍": "本课程介绍非数值型数据对象的定义和表达及其相关操作、算法的性能分析、常用的基本算法及应用等内容。通过本课程的学习,学生能够较为全面地理解数据结构的概含.掌握各种常用的数据结构及其算法,能够为实际问题选择合适的数据结构及其算法。", "name": "数据结构与算法基本信息", "category": null }, "后继课程": [] },
      findResult: [],
      show: false,
      recStudy: {

      },
    };
  },
  mounted() {
    this.echartsInit();
    this.gname = graph.nodes.filter((item) => {
      if (item.gid != undefined) return item;
    });
    this.mname = graph.nodes.filter((item) => {
      if (item.zid != undefined) return item;
    });
    console.log(this.graph, 778);
    console.log(this.search, 778);
  },
  methods: {
    async confimFn() {
      if (this.searchiptValue != '') {
        const res = await getSearchAPI({
          name: this.searchiptValue
        })
        // this.findResult = this.findResult1
        console.log(res);
        this.findResult = res.data.data
        this.show = true
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    reset() {
      this.searchForm = {
        knowledge: '',
        major: '',
        curriculum: ''
      }
    },
    async confim() {
      console.log('搜索');

      if (this.iptValue != '') {
        const res = await getIntrodectionAPI({
          name: this.iptValue
        })
        // this.graph = search
        this.graph = res.data
        this.echartsInit();
      }

    },
    /*     echartsInit() {
          let myChart = this.$echarts.init(this.$refs.echarts);
          myChart.showLoading();
          myChart.hideLoading();
          let option = {
            tooltip: {},
            legend: [
              {
                data: this.graph.categories.map(function (a) {
                  return a.name;
                }),
              },
            ],
            series: [
              {
                zoom: 2, //当前视角的缩放比例
                name: "Les Miserables",
                type: "graph",
                layout: "none",
                data: this.graph.nodes,
                links: this.graph.links,
                categories: this.graph.categories,
                roam: true,
                label: {
                  show: true,
                  position: "right",
                  formatter: "{b}",
                },
                labelLayout: {
                  hideOverlap: true,
                },
                scaleLimit: {
                  min: 0.4,
                  max: 2,
                },
                lineStyle: {
                  color: "source",
                  curveness: 0.3,
                },
              },
            ],
          };
          myChart.setOption(option);
        },
     */
    echartsInit() {
      let that = this
      let myChart = this.$echarts.init(this.$refs.echarts);
      let option = {
        // 工具箱
        toolbox: {
          // 显示工具箱
          show: true,
          feature: {
            mark: {
              show: true
            },
            // 还原
            restore: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },
        legend: [
          {
            data: this.graph.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        series: [{
          type: 'graph', // 类型:关系图
          layout: 'force', //图的布局，类型为力导图
          symbolSize: 40, // 调整节点的大小
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [2, 10],
          data: this.graph.nodes,
          links: this.graph.links,
          categories: this.graph.categories,
          edgeLabel: {
            normal: {
              textStyle: {
                fontSize: 16
              }
            }
          },
          force: {
            repulsion: 2500,
            edgeLength: [10, 50]
          },
          draggable: true,
          lineStyle: {
            normal: {
              width: 2,
              color: '#4b565b',
            }
          },
          edgeLabel: {
            normal: {
              show: true, // 是否在关系线上显示文字
              formatter: function (x) {
                return x.data.name;
              }
            }
          },
          label: {
            normal: {
              show: true, // 节点圆圈中间是否显示文字
              textStyle: {}
            }
          },
        }
        ]
      };
      myChart.off('click')
      myChart.on('click',async function (param) {
        const res = await getSearchAPI({
          name: param.data.name
        })
        that.isShow = false
        that.ShowMessage = res.data
      })
      myChart.setOption(option);
    }


  },
};
</script>

<style scoped>
.container {}

.select {
  height: 100%;
}

.search_header {
  margin: 25px;
}

.info {
  padding-bottom: 20px;
  margin-bottom: 15px;
  border-bottom: 2px solid deepskyblue;
  text-align: center;
}

.search_box {
  border: 1px solid white;
  padding: 10px;
}

.search_box .line {
  width: 100%;
  height: 15px;
  border-radius: 10px;
  background-color: rgb(227, 216, 216);
}

.search_box .show div {
  margin-bottom: 5px;
}

.search_box .show div .name {
  font-weight: bold;
}

/deep/ .el-input {
  width: 250px;
}

/deep/ .el-card {
  margin: 10px;
  padding: 5px;
}

.button {
  margin-bottom: 15px;
}

/deep/ .el-form-item {
  display: flex;
  align-items: center;
}

.sear_ifno {}

/deep/ .el-form {
  display: flex;
  align-items: center;
}

/deep/ .el-form-item__label {
  margin-left: 300px;
}
</style>